import React, { useState, useEffect } from 'react'
import './index.css';
import { Link, useNavigate } from 'react-router-dom'
import nav7 from '../../static/img/nav/nav7.png'
export default function Nav(props) {
    const navLiData = [
        '新鲜水果',
        '生猛海鲜',
        '肉类家禽',
        '蛋奶素食',
        '田园蔬菜',
        '零食酒水',
        '粮油杂货',
        '礼品卡卷',
        '家具用品'
    ];
    const navLiMains = [[
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "生猛海鲜", main: ['龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼'] },
        { title: "生猛海鲜", main: ['龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼'] },
        { title: "生猛海鲜", main: ['龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼'] },
        { title: "生猛海鲜", main: ['龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼'] },
        { title: "生猛海鲜", main: ['龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼'] },
        { title: "生猛海鲜", main: ['龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼', '龙虾', '鱼'] },
    ], [
        { title: "肉类家禽", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "肉类家禽", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "肉类家禽", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "肉类家禽", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "肉类家禽", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "肉类家禽", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "蛋奶素食", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "蛋奶素食", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "蛋奶素食", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "蛋奶素食", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "蛋奶素食", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "蛋奶素食", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "田园蔬菜", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "田园蔬菜", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "田园蔬菜", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "田园蔬菜", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "田园蔬菜", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "田园蔬菜", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "零食酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "零食酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "零食酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "零食酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "零食酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "零食酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "粮油酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "粮油酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "粮油酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "粮油酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "粮油酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "粮油酒水", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "礼品卡卷", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "礼品卡卷", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "礼品卡卷", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "礼品卡卷", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "礼品卡卷", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "礼品卡卷", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ], [
        { title: "家具用品", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "家具用品", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "家具用品", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "家具用品", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "家具用品", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "家具用品", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ]]
    const [navLiMain, setnavLiMain] = useState([
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
        { title: "新鲜水果", main: ['苹果', '香蕉', '西瓜', '柠檬', '苹果', '香蕉', '西瓜', '柠檬'] },
    ])
    let navc = [{
        title: '首页',
        to: '/',
        check: false
    }, {
        title: '同城',
        to: '/mycity',
        check: false
    }, {
        title: '礼拜五',
        to: '/firday',
        check: false
    }, {
        title: '积分商城',
        to: '/jfstore',
        check: false
    }, {
        title: '导航+',
        to: '/newuser',
        check: false
    },]
    const [navCheck, setnavCheck] = useState([])
    useEffect(() => {
        const cNavc = navc
        if (props.num) {
            const checkedLi = props.num - 1
            cNavc[checkedLi].check = true
        }
        setnavCheck(cNavc)
    }, [])
    function chickNav(num) {
        return () => {
            const newNavc = navc;
            newNavc[num].check = true;
            setnavCheck(newNavc);
        }
    }
    function showLis(num) {
        return () => {
            setnavLiMain(navLiMains[num])
        }
    }
    const navigate = useNavigate()
    function searchHot(text) {
        return () => {
            navigate('/tosearch?' + text)
        }
    }
    const navs = navCheck.map((navCheck, i) => {
        return <li onClick={chickNav(i)} key={i} className={navCheck.check ? 'checked' : ''}><Link to={navCheck.to}>{navCheck.title}</Link></li>
    })
    const navLi = navLiData.map((navData, i) => {
        return <li onMouseOver={showLis(i)} key={i}><img src={nav7} alt="" /><span>{navData}</span></li>
    })
    const navMain = navLiMain.map((navData, i) => {
        return <li key={i}>
            <span>{navData.title}</span>
            <ul className="all-type-main-text clear">
                {
                    navData.main.map((main, i) => {
                        return <li onClick={searchHot(main)} key={i}>{main}</li>

                    })
                }
            </ul>
        </li>
    })
    return (
        <div className="nav">
            <ul className="clear">
                <li className="all-type">
                    全部分类<i className="fa fa-chevron-down"></i>
                    <ul className="all-type-li">
                        {navLi}
                    </ul>
                    <ul className="all-type-main">
                        {navMain}
                    </ul>
                </li>
                {navs}
            </ul>
        </div>
    )
}
